<template>
  <div>
    <div class="tab-bar">
      <div v-for="(tab,index) in orderTab" :key="index" :class="{'active':activeIndex==index}" @click="tabClick(index,tab.type)">{{tab.name}}</div>
    </div>
    <div style="margin-top:44px">
      <div :hidden="activeIndex != 0">
        <orderItem  :orderType="-1" :show="activeIndex == 0"></orderItem>
      </div>
      <div :hidden="activeIndex != 1">
        <orderItem :orderType="'0'" :show="activeIndex == 1"></orderItem>
      </div>
      <div :hidden="activeIndex != 2">
        <orderItem   :orderType="1" :show="activeIndex == 2"></orderItem>
      </div>
      <div :hidden="activeIndex != 3">
        <orderItem :orderType="2" :show="activeIndex == 3"></orderItem>
      </div>
      <div :hidden="activeIndex != 4">
        <refundItem  :orderType="3" :show="activeIndex == 4"></refundItem>
      </div>
    </div>
  </div>
</template>

<script>
  import orderItem from '@/components/order-item'
  import refundItem from '@/components/refund-item'

  export default {
    data() {
      return {
        activeIndex: 0,
        orderTab: [
          { type: -1, name: '全部' },
          { type: 0, name: '待付款' },
          { type: 1, name: '待发货' },
          { type: 2, name: '待收货' },
          { type: 3, name: '退款' }
        ],
        orderType:-1
      }
    },
    onLoad() {
      this.$wx.setTitleBarTitle('订单列表');
    },
    methods: {
      tabClick(index, type) {
        this.activeIndex = index
        this.orderType = type
      }
    },
    mounted() {
    },
    components: {
      orderItem,
      refundItem
    }
  }
</script>

<style scoped>


</style>
